iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

Design System Research系列 第 18

2.4.9 Design System - Input Checkbox/Radiobox

  • 分享至 

  • xImage
  •  

人生真的很奇妙 可能在某個時間軸曾經跟某個人的時間軸交錯 但當下是不認識的
然後在幾年過後又再次交錯而認識彼此並建立起 Networking
你永遠不知道在人生中遇到的人是誰 也搞不好那個會伸出援手的人就是萍水相逢而認識的

今天要看一下兩種選擇的 box,checkbox 通常是用戶可以有多選的情況下會使用、單選則是會使用 radiobox
Checkbox&Radiobox 跟按鈕一樣會有多種狀態,Focus, Error, Disable, Selected, Unselected 等等
https://ithelp.ithome.com.tw/upload/images/20211003/20142064PQdiyqsnY8.png
來源:Material Design

目前設計上還沒有遇到 checkbox 分子母項,需要呈現為 Indeterminate 狀態的情況
通常在母項選擇後,子項會呈現全選的狀態
但如果用戶直接選擇子項,母項的 checkbox 就會轉為 Indeterminate 狀態
https://ithelp.ithome.com.tw/upload/images/20211003/201420645ZhwhOuLm3.png

另外,有些情況可能不太適用 checkbox,比如說當要開啟某項功能時,可能就使用 Toggle switch 開關會比較適合。

也要考量到,如果用戶是沒有滑鼠、使用鍵盤的操作模式


因為是週末,所以我又想偷懶一下了!

Day 18 End


上一篇
2.4.8 Design System - Icon
下一篇
2.4.10 Design System - Input Text
系列文
Design System Research30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言